<!-- 上传图片，组件 -->
<template>
	<view class="px-2">
		<view class="uni-uploader" v-if="show">
			<view class="uni-uploader-head">
				<view class="uni-uploader-title">点击可预览选好的图片</view>
				<view class="uni-uploader-info">{{ imageList.length }}/9</view>
			</view>
			<view class="uni-uploader-body">
				<view class="uni-uploader__files">
					<block v-for="(image, index) in imageList" :key="index">
						<!-- 循环遍历的，每张图片 -->
						<!-- 3. 添加 mode="aspectFill" 图片展示方式 -->
						<view class="uni-uploader__file position-relative">
							<image
								class="uni-uploader__img rounded"
								:src="image.url"
								:data-src="image.url"
								@tap="previewImage"
								mode="aspectFill"
							></image>
							<!-- 2. 添加，删除图标 ,并取消冒泡事件-->
							<view
								class="position-absolute top-0 right-0 rounded"
								style="padding: 5rpx 15rpx;background-color:rgba(0,0,0,0.5);"
								@click.stop="deleteImage(index)"
							>
								<text class="iconfont icon-shanchu text-white"></text>
							</view>
						</view>
					</block>
					<!-- 选择图片 -->
					<view class="uni-uploader__input-box rounded">
						<view class="uni-uploader__input" @tap="chooseImage"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import permision from '@/common/permission.js';
	var sourceType = [['camera'], ['album'], ['camera', 'album']];
	var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
	export default {
		// 4. props 接收父组件传入的 本地存储图片
		props:{
			// 接收父组件，本地存储的，图片数据，（多条，所以是数组类型)
			list:Array,
			// 5. 用于 展示 或隐藏 图片上传的模块（父组件控制)
			show:{
				type:Boolean,
				default:true // 默认显示
			}
		},
		data() {
			return {
				title: 'choose/previewImage',
				imageList:[], // 存放所有选中图片
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
			};
		},
		// 4.1 onReady不生效是针对于 组件的，对于 页面 是生效的，页面就是在pages.json中注册过的页面，自己写的组件nvue要使用vue的生命周期，比如mounted
		mounted(){
			this.imageList=this.list
			console.log(this.list);
		},
		onUnload() {
			(this.imageList = []),
				(this.sourceTypeIndex = 2),
				(this.sourceType = ['拍照', '相册', '拍照或相册']),
				(this.sizeTypeIndex = 2),
				(this.sizeType = ['压缩', '原图', '压缩或原图']),
				(this.countIndex = 8);
		},
		methods: {
			// 2.1 删除 点击的图片
			deleteImage(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片?',
					showCancel: true, // 是否显示删除按钮
					cancelText: '取消',
					confirmText: '删除',
					success: res=> {
						if (res.confirm) {
							//用户点击删除
							this.imageList.splice(index, 1);
							this.$emit('change', this.imageList);
						}
					},
				});
			},
			chooseImage: async function() {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif

				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log('是否继续?', isContinue);
					if (!isContinue) {
						return;
					}
				}
				// 上传图片
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count:
						this.imageList.length + this.count[this.countIndex] > 9
							? 9 - this.imageList.length
							: this.count[this.countIndex],
					success: (res) => {
						/* 6. 调用request封装的 文件上传 方法*/
						res.tempFilePaths.forEach(item=>{
							this.$H.upload('/image/uploadmore', {
							// 要上传文件资源的路径。
							filePath:item,
							// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 
							// 接口文档，要传输的字段
							name: 'imglist[]', 
							token: true,
							}).then((result) => {
								// 因为是 一张一张上传，接口返回的是一条，下标为0 即可
								this.imageList.push(result.data.list[0])
								// 通知父组件，发布一个自定义事件，携带选中的图片
								this.$emit('change', this.imageList);
							})
						})
                        /*  源码的，上传图片
						this.imageList = this.imageList.concat(res.tempFilePaths); */
					    // 1. 通知父组件，发布一个自定义事件，携带选中的图片
						// this.$emit('change', this.imageList);
					},
					fail: (err) => {
						console.log('err: ', err);
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						if (err.errMsg.indexOf('cancel') !== '-1') {
							return;
						}
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting();
											}
										},
									});
								}
							},
						});
						// #endif
					},
				});
			},
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: '已经有9张图片了,是否清空现有图片？',
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false);
							}
						},
						fail: () => {
							res(false);
						},
					});
				});
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList,
				});
			},
			async checkPermission(code) {
				let type = code ? code - 1 : this.sourceTypeIndex;
				let status = permision.isIOS
					? await permision.requestIOS(sourceType[type][0])
					: await permision.requestAndroid(
							type === 0 ? 'android.permission.CAMERA' : 'android.permission.READ_EXTERNAL_STORAGE',
					  );

				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: '没有开启权限',
						confirmText: '设置',
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						},
					});
				}

				return status;
			},
		},
	};
</script>

<style>
	.cell-pd {
		padding: 22rpx 30rpx;
	}

	.list-pd {
		margin-top: 50rpx;
	}
</style>
